import logo from "./assets/logo.png";
import header_message from "./assets/header_message_icon.png";
import header_actor from "./assets/header_actor_icon.png";
import "./index.scss";
import type { MenuProps } from "antd";
import { Dropdown } from "antd";
import { useEffect } from "react";
import { useSelector } from "react-redux";
import { select_userInfo } from "@/store/slice/userInfo";
import { getImgUrl } from "@/util";
import { useNavigate } from "react-router-dom";
function Header() {
	const navigate = useNavigate();
	const userInfo = useSelector(select_userInfo);

	return (
		<div className="header_main">
			<div className="header_left">
				<div className="header_left_logo">
					<img src={logo} alt="" />
				</div>
			</div>
			<div className="header_right">
				<div className="header_right_message">
					<img src={header_message} alt="" />
				</div>
				<Dropdown
					menu={{
						items: [
							{
								label: "个人中心",
								key: "0",
								onClick: () => {
									navigate("/person_info");
								},
							},
							{
								label: "退出登录",
								key: "1",
							},
						],
					}}
				>
					<div className="header_right_actor">
						<img
							src={userInfo.avatar ? getImgUrl(userInfo.avatar) : header_actor}
							alt=""
						/>
						<span>{userInfo?.name}</span>
					</div>
				</Dropdown>
			</div>
		</div>
	);
}

export default Header;
